<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item v-if="level == 1" label="省" prop="ProvinceName">
        <el-input v-model="form.ProvinceName" />
      </el-form-item>
      <el-form-item v-if="level == 2" label="市" prop="CityName">
        <el-input v-model="form.CityName" />
      </el-form-item>
      <el-form-item v-if="level == 3" label="区县" prop="CountyName">
        <el-input v-model="form.CountyName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { getEdit, cityEdit, countyEdit } from '@/api/area'
  export default defineComponent({
    name: 'AreaEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        level: 1,
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row, num) => {
        console.log(num, '2222')
        state.level = num
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
        }
        console.log(state.form, '   state.form')

        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            if (state.level == 1) {
              provinceEdit()
            }
            if (state.level == 2) {
              urbanEdit()
            }
            if (state.level == 3) {
              countiesEdit()
            }
            emit('fetch-data')
            close()
          }
        })
      }
      // 省
      const provinceEdit = async () => {
        const dataMsg = {
          ProvinceID: state.form.ProvinceID,
          ProvinceName: state.form.ProvinceName,
        }
        const { msg } = await getEdit(dataMsg)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
      }
      // 市
      const urbanEdit = async () => {
        const dataMsg = {
          ProvinceCode: state.form.ProvinceCode,
          CityID: state.form.CityID,
          CityName: state.form.CityName,
        }
        const { msg } = await cityEdit(dataMsg)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
      }
      // 区县
      const countiesEdit = async () => {
        const dataMsg = {
          CityCode: state.form.CityCode,
          CountyID: state.form.CountyID,
          CountyName: state.form.CountyName,
        }
        const { msg } = await countyEdit(dataMsg)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
      }

      return {
        ...toRefs(state),
        showEdit,
        provinceEdit,
        urbanEdit,
        countiesEdit,
        close,
        save,
      }
    },
  })
</script>
